<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
  <head>
      <meta charset="UTF-8">
      <title>条件渲染练习</title>
  </head>
  <body>

  <div id="app">
    <h1>演示条件判断</h1>
    输入成绩1~100:<input type="text" v-model:value="score" v-on:blur="check()">
    <p>你当前的成绩是{{score}}</p>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 70">良好</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>

  <script src="vue.js"></script>
  <script type="text/javascript">
    let vm = new Vue({
      el:"#app",
      data:{
        score:0
      },
      methods:{
        check(){
          if (this.score) {
            if (this.score > 100) {
              this.score = 100;
            }
            if (this.score < 0) {
              this.score = 0;
            }
          }
        }
      }
    })
  </script>
  </body>
</html>